<template>
<div style="margin:20px">
  <div class="qiye">企业文化墙</div>
   <!-- 图片上传组件辅助-->
   <el-upload
    class="avatar-uploader"
    :action="serverUrl"
    name="file"
    :headers="header"
    :show-file-list="false"
    :on-success="uploadSuccess"
    :on-error="uploadError"
    :before-upload="beforeUpload">
   </el-upload>
   <quill-editor
    v-model="content"
    ref="myQuillEditor"
    :options="editorOption"
    @change="onEditorChange($event)"
   >
   </quill-editor>
   <div class="submit">
  <el-button type="primary" @click="submit"><i class="el-icon-upload el-icon--right"></i>上传</el-button>
  <el-button type="danger" @click="reset" icon="el-icon-delete">清空</el-button>
   </div>
  </div>
</template>
<script>
  import {
    quillEditor
  } from 'vue-quill-editor'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import {culturalWallAdd} from '@/api/user'
 const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],    // toggled buttons
  [{'header': 1}, {'header': 2}],        // custom button values
  [{'list': 'ordered'}, {'list': 'bullet'}],
  [{'indent': '-1'}, {'indent': '+1'}],     // outdent/indent
  [{'direction': 'rtl'}],             // text direction
  [{'size': ['small', false, 'large', 'huge']}], // custom dropdown
  [{'header': [1, 2, 3, 4, 5, 6, false]}],
  [{'color': []}, {'background': []}],     // dropdown with defaults from theme
  [{'font': []}],
  [{'align': []}],
  ['link', 'image'],
  ['clean']
 
 ]
 export default {
   name: 'FuncFormsEdit',
    components: {
      quillEditor
    },
  data() {
   return {
    quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
    content: null,
    img:"",
    editorOption: {
     placeholder: '',
     theme: 'snow', // or 'bubble'
     modules: {
      toolbar: {
       container: toolbarOptions,
       handlers: {
        'image': function (value) {
         if (value) {
          // 触发input框选择图片文件
          document.querySelector('.avatar-uploader input').click()
         } else {
          this.quill.format('image', false);
         }
        }
       }
      }
     }
    },
    serverUrl: '/fileUpload/upload', // 这里写你要上传的图片服务器地址
    header: {
     // token: sessionStorage.token
    } // 有的图片服务器要求请求头需要有token
   }
  },
  methods: {
   onEditorChange({editor, html, text}) {//内容改变事件
    this.content = html
   },
   reset(){
     this.content=null
   },
   // 富文本图片上传前
   beforeUpload(file) {

    // 显示loading动画
    this.quillUpdateImg = true
   },
   submit(){
     this.culturalWallAdd()
   },
 culturalWallAdd(){
   culturalWallAdd({content:this.content,image:this.img}).then(res=>{
     if(res.code==200){
       this.$message.success("上传成功")
         this.content=null
     }else{
       this.$message.error(res.msg)
     }
   })
 },
   uploadSuccess(res, file) {
    // res为图片服务器返回的数据
    // 获取富文本组件实例

    let quill = this.$refs.myQuillEditor.quill
    // 如果上传成功
    if (res.code == 200 ) {
     // 获取光标所在位置
     this.img=res.data.data.filePath
     let length = quill.getSelection().index;
     // 插入图片 res.url为服务器返回的图片地址
     quill.insertEmbed(length,'image',"http://118.190.37.219:9991"+res.data.data.filePath)
     // 调整光标到最后
     quill.setSelection(length + 1)
    } else {
     this.$message.error('图片插入失败')
    }
    // loading动画消失
    this.quillUpdateImg = false
   },
   // 富文本图片上传失败
   uploadError() {
    // loading动画消失
    this.quillUpdateImg = false
    this.$message.error('图片插入失败')
   }
  }
 }
 </script>
 <style>
 .qiye{
      font-family: "经典圆体繁", "microsoft yahei", "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
    display: block;
    font-size: 38px;
    color: #9c7b7b;
    text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff;
    font-weight: bold;
    letter-spacing: -4px;
    text-align: center;
 }
 .ql-editor {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 1.42;
  min-height: 300px;
    outline: none;
    overflow-y: auto;
    padding: 12px 15px;
    -o-tab-size: 4;
    tab-size: 4;
    -moz-tab-size: 4;
    text-align: left;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.submit{
  margin-top: 35px;
  text-align: right;
}
 </style>
 